<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
    <script src="js/ceshi.js"></script>
    <style>
        .main {
            position: relative;
            width: 600px;
            height: 600px;
            border: 1px solid palevioletred;
        }

        h1 {
            text-align: center;
            height: 20px;

        }

        #chart {
            height: 530px;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>词云图</h1>
        <div id="chart"></div>
    </div>
    <script>
        // 左二：关系图
        var mychart = echarts.init(document.getElementById('chart'))

        var data = ([[7, 8, 4, 9, 4, 5, 4, 4, 56, 16, 17, 17, 18, 19, 20, 21, 15, 16, 27, 28, 2, 23, 18, 6, 25, 4, 3, 3, 8, 6, 25, 23, 24, 9, 1, 3, 25, 26, 27, 25, 26, 27, 11, 15, 9, 1, 27, 18, 6, 15, 1, 27, 27, 6, 25, 23, 24, 23, 24, 25, 26, 27, 28, 4, 3, 8, 13, 14, 15, 16, 17, 18, 23, 24, 18, 6, 25, 4, 3, 8, 9, 1, 3, 11, 15, 2, 23, 11, 15, 2, 18, 6, 25, 4, 3, 8, 9, 1, 3, 11, 15, 2],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 26, 27, 28, 2, 23, 18, 6, 25, 4, 25, 18, 6, 25, 4, 3, 8, 9, 1, 3, 11, 8, 9, 27, 27, 23, 24, 25, 18, 6, 25, 25, 4, 3, 24, 25, 15, 2, 4, 3, 4, 18, 11, 25, 4, 8, 9, 25, 4, 18, 19, 20, 21, 15, 16, 17, 23, 24, 25, 26, 27, 23, 24, 25, 8, 9, 1, 3, 11, 15, 2, 23, 24, 25, 26, 27, 28, 2, 23, 25, 4, 3, 8, 9, 1, 3, 11, 15, 2, 23, 24, 25, 18, 6],
        [7, 8, 4, 9, 4, 5, 10, 4, 6, 7, 8, 4, 9, 4, 5, 4, 4, 6, 24, 25, 26, 27, 28, 4, 3, 8, 13, 28, 2, 23, 24, 25, 26, 27, 27, 18, 11, 15, 23, 24, 11, 15, 25, 4, 9, 1, 3, 2, 23, 24, 9, 1, 3, 3, 11, 15, 25, 18, 28, 2, 25, 26, 1, 3, 2, 8, 25, 2, 24, 25, 9, 1, 11, 15, 9, 1, 11, 15, 2, 23, 24, 25, 26, 27, 28, 2, 23, 24, 25, 26, 27, 23, 24, 25, 26, 27, 27, 18, 6, 25, 4, 3],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 13, 14, 15, 16, 17, 18, 19, 11, 12, 17, 17, 18, 19, 20, 21, 15, 16, 17, 18, 6, 2, 23, 26, 27, 18, 6, 25, 26, 27, 28, 26, 27, 28, 8, 9, 25, 4, 24, 25, 25, 3, 8, 23, 24, 23, 24, 26, 27, 20, 21, 15, 16, 17, 23, 24, 25, 26, 27, 23, 24, 25, 26, 27, 4, 3, 8, 9, 1, 3, 11, 15, 2, 23, 25, 18, 6, 25, 4, 23, 24, 25, 26, 27, 27, 18, 6, 25, 4, 3, 8, 9, 1, 3],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 3, 8, 9, 1, 3, 11, 15, 2, 23, 3, 11, 15, 2, 23, 24, 25, 26, 27, 15, 2, 1, 3, 18, 6, 26, 27, 28, 4, 3, 8, 8, 9, 1, 26, 27, 23, 24, 8, 9, 3, 6, 15, 3, 8, 1, 3, 3, 8, 26, 27, 28, 2, 23, 18, 6, 25, 4, 3, 8, 9, 1, 3, 2, 24, 25, 26, 27, 27, 18, 6, 25, 4, 3, 8, 9, 1, 3, 11, 25, 4, 3, 8, 9, 1, 3, 11, 15, 2, 23, 24, 25, 26, 27],
        [7, 8, 4, 9, 4, 5, 15, 4, 6, 7, 8, 4, 9, 4, 5, 4, 4, 6, 14, 15, 16, 17, 18, 19, 11, 12, 13, 6, 25, 4, 3, 8, 9, 1, 3, 2, 23, 25, 26, 2, 23, 3, 8, 11, 15, 2, 25, 26, 27, 11, 15, 2, 2, 23, 24, 6, 25, 23, 24, 27, 28, 11, 15, 23, 9, 4, 23, 26, 27, 3, 11, 2, 23, 3, 27, 18, 6, 25, 4, 3, 8, 13, 14, 15, 16, 17, 18, 19, 11, 11, 15, 2, 23, 24, 25, 18, 6, 25, 4, 3, 8, 9],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 7, 8, 4, 9, 6, 25, 4, 3, 8, 14, 15, 9, 10, 11, 12, 13, 15, 16, 24, 25, 27, 28, 24, 25, 23, 24, 25, 23, 24, 25, 23, 24, 25, 4, 3, 18, 6, 2, 23, 24, 1, 3, 28, 2, 15, 2, 24, 25, 12, 13, 14, 15, 9, 10, 11, 12, 13, 15, 16, 17, 17, 18, 19, 11, 15, 2, 23, 24, 25, 26, 27, 28, 2, 23, 24, 18, 6, 25, 3, 8, 9, 1, 3, 11, 15, 2, 23, 24, 25, 26, 27, 28, 2],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 13, 14, 15, 9, 10, 11, 12, 13, 15, 23, 24, 25, 26, 27, 23, 24, 25, 26, 25, 4, 24, 18, 28, 2, 4, 3, 8, 2, 23, 24, 2, 23, 24, 1, 3, 3, 8, 26, 27, 18, 11, 9, 25, 26, 25, 18, 28, 2, 28, 2, 23, 18, 6, 25, 4, 3, 8, 9, 1, 3, 11, 15, 2, 3, 8, 9, 1, 3, 11, 15, 2, 23, 24, 25, 26, 27, 28, 2, 11, 15, 2, 23, 24, 25, 18, 6, 25, 4, 3, 8, 9, 1, 3],
        [7, 8, 4, 9, 4, 5, 4, 4, 6, 17, 23, 24, 25, 26, 27, 23, 24, 25, 8, 9, 1, 3, 11, 15, 2, 23, 24, 9, 1, 4, 3, 25, 26, 11, 15, 2, 55, 55, 55, 27, 18, 6, 2, 23, 3, 11, 6, 25, 25, 2, 3, 18, 6, 4, 3, 18, 6, 19, 11, 12, 13, 14, 15, 9, 10, 11, 12, 13, 15, 16, 17, 17, 28, 2, 23, 24, 25, 26, 27, 55, 55, 55, 18, 6, 25, 4, 3, 23, 24, 25, 26, 27, 28, 2, 23, 24, 25, 26, 27, 27, 18, 6]]);
        var newdata = ['华冠超市', '华联生鲜超市', '大润发超级卖场', '家家福', '欧尚', '物美超市', '盒马鲜生', '苏宁易生鲜', '超市发']
        console.log(newdata);
        var option = {
            title: [
                {
                    text: 'Michelson-Morley Experiment',
                    left: 'center',
                },
                {
                    text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
                    borderColor: '#999',
                    borderWidth: 1,
                    textStyle: {
                        fontSize: 14
                    },
                    left: '10%',
                    top: '90%'
                }
            ],
            legend: {
                data: ['line', 'line2', 'line3']
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '15%'
            },
            xAxis: {
                type: 'category',
                data: newdata,
                boundaryGap: true,
                nameGap: 30,
                splitArea: {
                    show: false
                },
                axisLabel: {
                    formatter: newdata
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                // name: 'km/s minus 299,000',
                splitArea: {
                    show: true
                }
            },
            series: [
                {
                    name: 'boxplot',
                    type: 'boxplot',
                    data: data,
                    tooltip: {
                        formatter: function (param) {
                            return [
                                'Experiment ' + param.name + ': ',
                                'upper: ' + param.data[4],
                                'Q3: ' + param.data[3],
                                'median: ' + param.data[2],
                                'Q1: ' + param.data[1],
                                'lower: ' + param.data[0]
                            ].join('<br/>')
                        }
                    }
                },
                {
                    name: 'outlier',
                    type: 'scatter',
                    data: data.outliers
                }
            ]
        }
        mychart.setOption(option)
    </script>

</body>

</html>